<template>
 <el-form ref="form" :model="device" :rules="rules"  label-width="100px">
      <el-form-item label="设备名称">
        <el-input v-model="device.name"></el-input>
      </el-form-item>
      <el-form-item label="设备地址">
        <el-input v-model="device.address"></el-input>
      </el-form-item>
      <el-form-item label="2字节整数">
        <el-select  v-model="device.two_byte_int">
          <el-option 
            v-for="item in SYS_PARAMS.two_byte_int"
            :key="item.name+item.name"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
            <el-form-item label="4字节整数">
        <el-select  v-model="device.four_byte_int">
          <el-option 
            v-for="item in SYS_PARAMS.four_byte_int"
            :key="item.name+item.name"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="4字节浮点数">
        <el-select  v-model="device.four_byte_float">
          <el-option 
            v-for="item in SYS_PARAMS.four_byte_int"
            :key="item.name+item.name"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="8字节浮点数">
        <el-select  v-model="device.eight_byte_float">
          <el-option 
            v-for="item in SYS_PARAMS.eight_byte_float"
            :key="item.name+item.name"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="字符串">
        <el-select  v-model="device.endian">
          <el-option 
            v-for="item in SYS_PARAMS.endian"
            :key="item.name+item.name"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <div class="form-button">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </el-form>
</template>
<script>
import {mapGetters} from 'vuex';
import {
  addDeviceApi,
  updateDeviceApi
} from '@/api/setting'
export default {
  name: 'form-device',
  props:{
    data: Object
  },
  computed: {
    ...mapGetters(['SYS_PARAMS'])
  },
  watch:{
    data: {
      immediate: true,
      handler(){
        this.device = this.data;
      }
    }
  },
  data(){
    return {
      device: {
        'name': '',
        'address': '',
        'two_byte_int': 'AB',
        'four_byte_int': 'AB CD',
        'four_byte_float': 'AB CD',
        'eight_byte_float': 'AB CD EF GH',
        'endian': 'Little',
      },
      rules: {
        'name': [{required: true, trigger: 'blur', message: '请输入设备名称'}],
        'address': [{required: true, trigger: 'blur', message: '请输入设备地址'}],
        'two_byte_int': [{required: true, trigger: 'blur', message: '请选择字节类型'}],
        'four_byte_int': [{required: true, trigger: 'blur', message: '请选择字节类型'}],
        'four_byte_float': [{required: true, trigger: 'blur', message: '请选择字节类型'}],
        'eight_byte_float': [{required: true, trigger: 'blur', message: '请选择字节类型'}],
        'endian': [{required: true, trigger: 'blur', message: '请选择字符串类型'}],
      },
      loading: false
    }
  },
  methods: {
    cancel(){
      this.$emit('close')
    },
    confirm(){
      this.$refs.form.validate( valid => {
        if(valid){
          this.loading = true;
          if(this.device.id) this.updateDevice();
          else this.addDevice();
        }
      })
    },
     addDevice(){
      addDeviceApi(this.device).then(res => {
        this.loading = false;
        if(res.code == 0){
          this.$message({type: 'success', message: '提交成功'})
          this.$emit('refresh', {parent_id: this.device.parent_id})
          this.$emit('close')
        }
      })
    },
    updateDevice(){
      updateDeviceApi(this.device).then(res => {
        this.loading = false;
        if(res.code == 0){
          this.$message({type: 'success', message: '提交成功'})
          this.$emit('refresh', {parent_id: this.device.parent_id})
          this.$emit('close')
        }
      })
    },
  }

}
</script>
<style  scoped>
.form-button{
  margin-left: 30px;
  position: absolute;
  bottom: 20px;
}
</style>
